<script>
import PoolCharts from "./PoolCharts.vue";
import BlocksTable from "./BlocksTable.vue";
import {ProfilingData} from "./profiling-data";

export default {
  components: {
    PoolCharts,
    BlocksTable,
  },
  methods: {
    onAddingLogFile(e) {
      this.setLoading(true);
      let promise = new ProfilingData().addLogFile(e.target.files[0]);
      for (let i = 1; i < e.target.files.length; ++i) {
        promise = promise.then((result) => {
          return result.addLogFile(e.target.files[i]);
        });
      }
      promise.then((result) => {
        console.log("Parse all files end, start to draw, pd: ", result);
        this.$refs.charts.updateByPd(result);
        this.$refs.table.updateByPd(result);
        this.setLoading(false);
      })
    },
    setLoading(isLoading) {
      this.$refs.charts.setLoading(isLoading);
      this.$refs.table.setLoading(isLoading);
    }
  }
}
</script>

<template>
  <div class="container-fluid">
    <div class="row">
      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Dashboard</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
          <div class="input-group">
            <input type="file" multiple v-on:change="onAddingLogFile" class="form-control">
            <!-- <button class="btn btn-outline-secondary" type="button">Clear</button> -->
          </div>
        </div>
      </div>
    </div>

    <PoolCharts class="my-4 w-100" style="height:800px;" ref="charts" />

    <h2>Blocks Table</h2>
    <BlocksTable ref="table" />
  </div>
</template>
